<template>
  <div>
    <p class="title">练习</p>
    <div class="nav-box">
      <van-grid class="nav" >
        <van-grid-item icon="edit" text="考点专练" to="/point" />
        <van-grid-item icon="column" text="套卷练习" to="/paper-package"/>
        <van-grid-item icon="records" text="仿真练习" />
        <van-grid-item icon="coupon" text="错题练习" />
        <van-grid-item icon="bars" text="测评记录" />
        <van-grid-item icon="like" text="习题收藏" />
      </van-grid>
    </div>

    <div class="main">
      <div class="main-title">近期模考</div>
      <div class="main-sort">
        <p>默认排序</p>
        <p>时间</p>
      </div>
      <div class="main-center">暂无模考安排，敬请期待</div>
    </div>
  </div>
</template>

<script>
export default {
  props: [],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
   
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped  lang="scss" >
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 20px;
}
.nav-box {
  width: 100%;
  height: 200px;
  background-color: #eee;
  box-sizing: border-box;
  padding: 10px;
}
.nav {
  background-color: #fff;
  height: 180px;
  box-sizing: border-box;
  border-radius: 10px;
}
.main {
  width: 94%;
  height: 300px;
  padding: 10px;
  .main-title {
    font-size: 16px;
    color: #ccc;
  }
  .main-sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    p:nth-child(1) {
      color: orangered;
    }
    p:nth-child(2) {
      color: #aaa;
    }
  }
  .main-center {
    font-size: 12px;
    color: #aaa;
    text-align: center;
  }
}
</style>
